<template>
  <div class="g3">
    <div class="mb20 lh1">表单</div>
    <div class="ks-row-middle mb20 lh1">
      <el-select
        v-model="formId"
        filterable
        style="width: 100%"
      >
        <el-option
          v-for="com in list"
          :key="com.key"
          :value="com.key"
          :label="com.name + '（' +com.key + '）'"
        />
      </el-select>
    </div>
    <template v-if="formId">
      <div class="ks-row-middle mb20 lh1">
        唯一标识： {{ formId }}
      </div>
      <el-divider>模型信息</el-divider>
      <div class="mb10 g3">模型名称</div>
      <div class="ell mb20">{{ modelName }}</div>
      <div class="mb10 ">模型编码</div>
      <div class="ell">{{ getModelCode() }}</div>
      <!--      有回调的表单相关积木-->
      <template v-if="cbBlocks.includes(this.block.type)">
        <el-divider>回调设置</el-divider>
        <div class="ks-row-between mb20 lh1">
          <span style="width: 100px">成功回调</span>
          <el-switch v-model="showSuccess" @change="changeShowSuccess" />
        </div>
        <div class="ks-row-between mb20 lh1">
          <span style="width: 100px">失败回调</span>
          <el-switch v-model="showError" @change="changeShowError" />
        </div>
      </template>
    </template>

  </div>
</template>

<script>

import { getHmmodelList } from '@/apis/paas/HmModelController.js'
import { getAllFormList } from '../../../utils/component'
export default {
  name: 'ComponentSelect',
  props: {
    eventItem: {}, // 需要逻辑编排的对象
    componentItem: {},
    block: {},
    workspace: {}
  },
  components: { },
  computed: {
    formId: {
      get () {
        const blockComponentId = this.block?.getFieldValue('Form')
        return blockComponentId || ''
      },
      set (val) {
        this.block.setFieldValue(val, 'Form')
        this.getModelCode()
      }
    },
    requestSuccess: {
      get () {
        const count = this.block?.successCount_
        this.showSuccess = !!count
        return !!count
      },
      set (val) {
        this.block.successCount_ = val ? 1 : 0
        this.block.updateShape_()
      }
    },
    requestError: {
      get () {
        const count = this.block?.errorCount_
        this.showError = !!count
        return !!count
      },
      set (val) {
        this.block.errorCount_ = val ? 1 : 0
        this.block.updateShape_()
      }
    }
  },
  data () {
    return {
      formData: {},
      modelList: [], // 所有业务模型的list
      list: [], // 组件列表
      modelName: '', // 模型名称
      showSuccess: false,
      showError: false,
      cbBlocks: ['form_submit']
    }
  },
  watch: {
    'block': {
      handler () {
        this.getBlockData()
      },
      immediate: true
    }
  },
  methods: {
    getBlockData () {
      this.list = getAllFormList() || []
      if (!this.list.length) return
      const blockComponentId = this.block?.getFieldValue('Form')
      if (blockComponentId) {
        this.formId = blockComponentId
      }
      if (!this.cbBlocks.includes(this.block.type)) return
      const successCount = this.block?.successCount_
      this.showSuccess = !!successCount
      this.requestSuccess = !!successCount

      const errorCount = this.block?.errorCount_
      this.showError = !!errorCount
      this.requestError = !!errorCount
    },
    getModelCode () {
      const res = this.list.find(item => item.key === this.formId)
      const modelCode = res?.__config?.modelCode
      modelCode ? this.getModelName(modelCode) : this.modelName = ''
      return modelCode || ''
    },
    async getModelName (modelCode) {
      const models = await getHmmodelList()
      const res = models.find(item => item.code === modelCode)
      this.modelName = res?.name || ''
    },
    changeShowSuccess (val) {
      this.requestSuccess = val
    },
    changeShowError (val) {
      this.requestError = val
    }
  }
}
</script>

<style scoped>

</style>
